<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-10 14:19:37
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-26 14:57:41
 * @FilePath: \cxl-h5\src\pages\report\base\Mesh.vue
-->
<template>
    <section class="mesh-container">
        <section class="mesh-item" v-for="(item, index) in list" :key="item" @click="onClick(index)">
            <section class="mesh-icon">
                <img :src="item.icon" alt="" srcset="" />
            </section>
            <p>{{ item.text }}</p>
            <section class="normal">
                <!-- 0正常，1 无法确定 2 疑似,3 维保异常，4 出险异常 -->
                <img src="../../../assets/images/icon_zc@3x.png" v-if="item.status === 0" alt="" srcset="" />
                <img src="../../../assets/images/icon_yc@3x.png" v-else-if="item.status === 4" alt="" srcset="" />
            </section>
            <i v-if="item.status === 1">疑似</i>
            <i v-else-if="item.status === 2">不确定</i>
        </section>
    </section>
</template>
<script setup lang="ts">
import { reactive, watchEffect } from 'vue'

//接收来自父级的参数
const props = defineProps(['list'])
const emits = defineEmits(['touch'])

//列表
const list: any[] = reactive([])

//监听父级参数的变化
watchEffect(() => {
    if (props.list) {
        list.length = 0
        props.list.forEach((item: any) => {
            list.push(item)
        })
    }
})

const onClick = (index: number) => {
    emits('touch', index)
}
</script>

<style scoped lang="scss">
.mesh-container {
    display: flex;
    flex-wrap: wrap;
    .mesh-item {
        width: 33.33%;
        position: relative;
        box-sizing: border-box;
        padding: var(--cxl-size-12) 0 var(--cxl-size-40) 0;
        .mesh-icon {
            width: var(--cxl-size-30);
            height: var(--cxl-size-30);
            margin: auto;
            img {
                display: block;
                width: 100%;
            }
        }
        p {
            font-size: var(--cxl-size-15);
            text-align: center;
            margin: var(--cxl-size-12) 0 0 0;
        }
        .normal {
            width: var(--cxl-size-22);
            height: var(--cxl-size-22);
            position: absolute;
            top: 0.5rem;
            right: calc(50% - var(--cxl-size-24));
            img {
                display: block;
                width: 100%;
            }
        }
        i {
            position: absolute;
            font-size: var(--cxl-size-12);
            display: block;
            top: 0.5rem;
            right: 1rem;
            background-color: var(--cxl-color-333333);
            color: var(--cxl-color-white);
            padding: 0.2rem 0.5rem;
            border-radius: 1rem;
        }
    }
}
</style>
